<template>
  <div>
    <div v-if="newsData && newsData.list && newsData.list.length > 0">
      <div class="mews-publish flex flex-col py-[20px] items-center">
        <div v-if="activeStep === 1" class="w-full flex flex-col items-center">
          <el-steps style="min-width: 600px" :active="1" align-center>
            <el-step title="发布内容" />
            <el-step title="发布设置" />
          </el-steps>
          <PageToBePublished class="w-[66vw]" :showPublishButton="false" :showArrows="true" />
          <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
        <div v-if="activeStep === 2" class="w-full flex flex-col items-center">
          <el-steps style="min-width: 600px" :active="2" align-center>
            <el-step title="发布内容" />
            <el-step title="发布设置" />
          </el-steps>
          <div>
            <ReleaseSettings :prevStep="prevStep" />
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <DataNo />
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import PageToBePublished from '@/page/PageToBePublished.vue'
import ReleaseSettings from '@/page/ReleaseSettings.vue'
import { getReleaseList } from '../api/newsApi'
import DataNo from '@/page/DataNo.vue'

const activeStep = ref(1)
const newsData = ref({ list: [] })

console.log(newsData.value)

const nextStep = () => {
  activeStep.value++
}

const prevStep = () => {
  activeStep.value--
}

const handleStepChange = (step) => {
  activeStep.value = step
}

// 在组件挂载前获取数据
onBeforeMount(async () => {
  try {
    const res = await getReleaseList()
    if (res.code === 200) {
      newsData.value = res.data
      console.log('获取到的数据：', res.data)
      console.log('数据长度：', newsData.value.list ? newsData.value.list.length : 0)
    }
  } catch (error) {
    console.error('获取数据失败：', error)
    // 确保即使出错也有一个默认结构
    newsData.value = { list: [] }
  }
})


</script>

<style scoped>
/* .mews-publish {
  min-height: 100vh;
  display: flex;
  align-items: center;
} */
</style>
